import * as React from 'react'
import { withRouter, RouteComponentProps } from 'react-router'
import { isFunc } from 'muka'
import { getClassName } from '../utils'
import Icon from '../Icon'

interface IProps extends RouteComponentProps<any> {
    className?: string
    left?: string | JSX.Element | JSX.ElementClass
    title?: string | JSX.Element | JSX.ElementClass
    right?: string | JSX.Element | JSX.ElementClass
    fixed?: boolean
    divider?: boolean
    distance?: number
    moveBgColor?: string
    bgAnimate?: boolean
    endOpacity?: number
    animateProps?: ('left' | 'right' | 'title')[]
    animateMove?: (val: number) => void
    animateEnd?: (val: number) => void
}

interface IState {
    bgColor: string | undefined
    opacity: number
}

class NavBar extends React.Component<IProps, IState> {

    public static defaultProps = {
        bgAnimate: true,
        divider: true
    }

    public state = {
        bgColor: '',
        opacity: this.props.moveBgColor ? 0 : 1
    }

    public render() {
        const { className, left, divider, title, right, fixed, animateProps } = this.props
        const { bgColor, opacity } = this.state
        const props: any = animateProps ? [...animateProps] : ['title']
        return (
            <div
                className={`${getClassName(`nav_bar${divider ? ' divider' : ''} flex_justify${fixed ? ' fixed' : ''}`, className)}`}
                style={{ background: bgColor }}
            >
                <div className="flex">
                    <div
                        className={getClassName('nav_bar_left', 'flex_justify')}
                        style={{ opacity: props.includes('left') && opacity }}
                    >
                        {left ? left : <Icon type="arrow_left" onClick={this.handleBack} />}
                    </div>
                    <div
                        className={getClassName('nav_bar_title flex_1', 'flex_justify')}
                        style={{ opacity: props.includes('title') && opacity }}
                    >
                        {title}
                    </div>
                    <div
                        className={getClassName('nav_bar_right', 'flex_justify')}
                        style={{ opacity: props.includes('right') && opacity }}
                    >
                        {right}
                    </div>
                </div>
            </div>
        )
    }

    public componentDidMount() {
        const { distance } = this.props
        if (distance) {
            window.addEventListener('scroll', this.handleScroll)
        }
    }

    public componentWillUnmount() {
        window.removeEventListener('scroll', this.handleScroll)
    }

    private handleScroll = () => {
        const { distance, moveBgColor, bgAnimate, endOpacity, animateMove, animateEnd } = this.props
        let opacityProps: number = endOpacity ? endOpacity : 1
        opacityProps = opacityProps >= 1 ? 1 : opacityProps
        const top = document.documentElement.scrollTop || document.body.scrollTop
        if (distance) {
            let opacity = top / distance
            opacity = opacity > opacityProps ? opacityProps : opacity
            if (isFunc(animateMove)) {
                animateMove(opacity)
            }
            if (top >= distance) {
                if (isFunc(animateEnd)) {
                    animateEnd(opacity)
                }
            }
            if (bgAnimate) {
                this.setState({
                    bgColor: `rgba(${moveBgColor}, ${opacity})`,
                    opacity
                })
            } else {
                if (top >= distance) {
                    this.setState({
                        bgColor: moveBgColor
                    })
                } else {
                    this.setState({
                        bgColor: ''
                    })
                }
            }
        }
    }

    private handleBack = () => {
        const { history } = this.props
        history.goBack()
    }
}
export default withRouter(NavBar)